<template>
  <div>
    <div class="banner">
      <div class="cont">
        <div class="btnRight" @click="stateClcik">
          <img
            src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/Supplier@2x.png"
            mode="widthFix"
          />
          <span>供应商</span>
        </div>
      </div>
      <div class="bannerImg">
        <swiper
          :indicator-dots="false"
          :autoplay="false"
          :circular="true"
          easing-function="easeOutCubic"
          class="swiper"
          v-if="bannerImgList.length"
        >
          <swiper-item v-for="(item,index) in bannerImgList" :key="index">
            <img :src="item.bannerImg" mode="scaleToFill" />
          </swiper-item>
        </swiper>
        <img
          v-else
          src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bazaar-home-banner.png"
          mode="scaleToFill"
        />
      </div>
    </div>
    <div class="newContent">
      <div class="disBox">
        <div class="top">
          <img
            src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bazaar-dis-icon.png"
            mode="scaleToFill"
          />
          <div>
            <span>分销市场</span>
            <p>在分销市场里，您可以选择您中意的产品放在您的店铺售卖</p>
          </div>
          <button @click="myDisClick">我的分销</button>
        </div>
        <div class="middle" @click="findAllType('dis')">
          <button>查看更多分类</button>
          <div>
            <img
              src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bazaar-min-icon.png"
              mode="widthFix"
            />
            <i-icon type="enter" size="28" color="#222" />
          </div>
        </div>
        <scroll-view
          class="list"
          scroll-x
          enable-flex
          @scrolltolower="handleLoadMore"
        >
          <div v-for="(item,idx) in list" :key="idx">
            <img
              :src="item.goodsImg"
              mode="aspectFit"
              @click="orderClick(item)"
            />
            <p>赚：￥{{item.disAmount}}</p>
          </div>
        </scroll-view>
      </div>
      <div class="kong"></div>
      <div class="cargoBox">
        <div class="top">
          <img
            src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bazaar-stock-icon.png"
            mode="scaleToFill"
          />
          <div>
            <span>进货市场</span>
            <p>商品众多任您选购，一键进货，丰富您的商品种类</p>
          </div>
          <button @click="myStockLinkClick">我的进货</button>
        </div>
        <div class="middle" @click="findAllType('stock')">
          <button>查看更多分类</button>
          <div>
            <img
              src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bazaar-min-icon.png"
              mode="widthFix"
            />
            <i-icon type="enter" size="28" color="#222" />
          </div>
        </div>
        <scroll-view
          class="list"
          scroll-x
          enable-flex
          @scrolltolower="handleLoadMore2"
        >
          <div v-for="(item,idx) in list2" :key="idx">
            <img
              :src="item.goodsImg ? item.goodsImg : ''"
              mode="aspectFit"
              @click="orderClick(item)"
            />
            <p>￥{{item.stockSupplyCost ? item.stockSupplyCost : 0}}</p>
          </div>
        </scroll-view>
      </div>
    </div>
    <AlertBox :dateInfo="dateInfo" @change="AlertBoxChange" :isAlert="isAlert"></AlertBox>
    <!-- <vue-tab-bar
      @fetch-index="clickIndexNav"
      :selectNavIndex="selectNavIndex"
      :needButton="needButton"
    ></vue-tab-bar> -->
  </div>
</template>

<script>
import vueTabBar from '@/components/vueTabBarDis'
import AlertBox from '@/components/AlertBox'

import {
  FIND_SHOP_GOODS_PAGE,
  CREATE_GOODS_DIS_API,
  FIND_SHOP_KIND_APPLY_PAGE_API,
  CREATE_SHOP_KIND_APPLY_API,
  FIND_DIS_HOMEPAGE_BANNER,
  FIND_STOCK_GOODS_PAGE
} from '@/api'

export default {
  components: { vueTabBar, AlertBox },
  props: {},
  data () {
    return {
      currentPage: 1,
      currentPage2: 1,
      alreadyLastPage: false,
      alreadyLastPage2: false,
      list: [],
      list2: [],
      state: '',
      seek: '',
      selectNavIndex: 0,
      needButton: true,
      bannerImgList: [],
      dateInfo: {},
      isAlert: false
    }
  },
  computed: {
    account () {
      // return this.$cookie.get('account')
      return this.$store.state.account
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.isAlert = false
    this.listInit()
    this._findShopKindApplyPageApi()
    // wx.hideTabBar()
    this.findDisHomePageBanner()
    this._findShopList()
    this._findShopList2()
  },
  methods: {
    // linkSeekClick () {
    //   this.$router.push(
    //     `/pages/shop-management/dis/find-dis-shop/main?seekState=true`
    //   )
    // },
    orderClick (item) {
      this.$router.push(
        `/pages/shop-management/dis/dis-shop-info/main?goodsNo=${item.goodsNo}`
      )
    },
    stateClcik () {
      const vm = this
      if (vm.state === '0') {
        // vm.$router.push('/pages/data-analyze/stock/supply/select/main')
        vm.dateInfo = {
          src:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/shenheizhong.png',
          title: '审核中',
          label: '请3-5个工作日再进行查看'
        }
        vm.isAlert = true
      } else if (vm.state === '1') {
        vm.$router.push('/pages/data-analyze/stock/supply/select/main')
      } else {
        vm.$dialog('确定申请成为供应商').then(r => {
          // vm._createShopKindApplyApi() // 这个要跳页面申请
          vm.$router.push('/pages/shop-management/dis/turn-into-supplier/main')
        })
      }
      // else if (vm.account.shopKind === 'SUPPLIER') {
      //   // vm.dateInfo = {
      //   //   src:
      //   //     'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/supplier_succ.png',
      //   //   title: '',
      //   //   label: '您已成为供应商'
      //   // }
      //   // vm.isAlert = true

      //   // 20200217新加的 现在有分销和进货两个东西了 就把提示弹窗去掉了
      //   vm.$router.push('/pages/data-analyze/stock/supply/select/main')
      // }
    },
    myStockLinkClick () {
      this.$router.push(`/pages/data-analyze/stock/my/index/main`)
    },
    findAllType (type) {
      this.$router.push(`/pages/shop-management/dis/type/main?type=${type}`)
    },
    findShopInfo (item) {
      this.$router.push(
        `/pages/shop-management/dis/dis-shop-info/main?goodsNo=${item.goodsNo}`
      )
    },
    myDisClick () {
      // this.$router.push(`/pages/shop-management/dis/dis-centre/main`)
      this.$router.push(`/pages/shop-management/dis/my-dis-shop/main`)
    },
    disMoneyClick (item) {
      const vm = this
      // wx.showModal({
      //   title: `可赚钱佣金：￥${item.disAmount}`,
      //   content: `供货价：￥${item.goodsDiscount}`,
      //   showCancel: true,
      //   confirmText: '确定',
      //   confirmColor: '#5d93fd',
      //   success: function (res) {
      //     if (res.confirm) {
      vm.createGoodsShop(item.goodsNo)
      //   } else if (res.cancel) {
      //   }
      // }
      // })
    },
    createGoodsShop (goodsNo) {
      const vm = this
      CREATE_GOODS_DIS_API(vm.$cookie.get('account').shopId, goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            // vm.$alert('分销成功', '').then(() => {})
            vm.dateInfo = {
              src:
                'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/fenxiaocheng.png',
              title: '',
              label: '分销成功'
            }
            vm.isAlert = true
          } else if (r.data.code === 'GOODS-DIS-HAS-EXIST') {
            vm.dateInfo = {
              src:
                'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/fenxiaocheng.png',
              title: '提示',
              label: '此商品已分销，您可在我的分销中查看'
            }
            vm.isAlert = true
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    AlertBoxChange (val) {
      this.isAlert = val
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._findShopList()
      }
    },
    handleLoadMore2 () {
      if (!this.alreadyLastPage2) {
        this._findShopList2()
      }
    },
    _findShopList () {
      const vm = this
      let params = {}
      params.providerId = vm.account.providerId
      params.state = 1
      params.isDis = 'Y'
      if (vm.seek) {
        params.goodsName = vm.seek
      }
      FIND_SHOP_GOODS_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { isFirstPage, isLastPage, list } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 商品列表
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.list.push(...list)
        vm.alreadyLastPage = true
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    },
    _findShopList2 () {
      const vm = this
      let params = {}
      params.providerId = vm.account.providerId
      params.state = 1
      params.isStock = 'Y'
      params.isShelf = '1'
      // to do 测试阶段添加shopId就无数据
      // params.shopId = vm.account.shopId
      if (vm.seek) {
        params.goodsName = vm.seek
      }
      // FIND_SHOP_GOODS_PAGE(params, vm.currentPage2, 10)
      FIND_STOCK_GOODS_PAGE(params, vm.currentPage2, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { isFirstPage, isLastPage, list } = r.data.data
            vm.printList2(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 商品列表
    printList2 (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list2 = list
        if (isLast || !list.length) {
          vm.alreadyLastPage2 = true
        } else {
          vm.alreadyLastPage2 = false
          vm.currentPage2 += 1
        }
      } else if (isLast) {
        vm.alreadyLastPage2 = true
        vm.list2.push(...list)
      } else {
        vm.list2.push(...list)
        vm.alreadyLastPage2 = false
        vm.currentPage2 += 1
      }
    },
    _findShopKindApplyPageApi () {
      const vm = this
      let params = {
        phone: vm.$cookie.get('account').cellphone,
        shopId: vm.$cookie.get('account').shopId,
        shopKind: 'SUPPLIER',
        providerId: vm.account.providerId
      }
      FIND_SHOP_KIND_APPLY_PAGE_API(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data.list.length) {
              let state = r.data.data.list[0].state
              vm.state = state
              // if (state === '0') {
              //   vm.entity2 = '申请中'
              // } else if (state === '1') {
              //   vm.entity2 = '已通过'
              // } else if (state === '2') {
              //   vm.entity2 = '未通过'
              // }
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _createShopKindApplyApi () {
      const vm = this
      let params = {
        shopId: vm.$cookie.get('account').shopId,
        shopKind: 'SUPPLIER'
      }
      CREATE_SHOP_KIND_APPLY_API(params)
        .then(r => {
          if (r.data.code === '0') {
            wx.showModal({
              title: '资料提交成功',
              content:
                '我们会在1-3个工作日内处理您的申请若有问题请致电400-888-5115',
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#5d93fd',
              success: function (res) {
                if (res.confirm) {
                  // vm.$router.go(-1)
                  vm._findShopKindApplyPageApi()
                }
              },
              fail: function (err) {
                console.error(err)
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    listInit () {
      const vm = this
      vm.list = []
      vm.currentPage = 1
      vm.alreadyLastPage = false
      vm.list2 = []
      vm.currentPage2 = 1
      vm.alreadyLastPage2 = false
    },
    findDisHomePageBanner () {
      const vm = this
      let params = {
        bannerTag: 'dis',
        providerId: vm.account.providerId
      }
      FIND_DIS_HOMEPAGE_BANNER(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.bannerImgList = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.banner {
  width: 100%;
  height: 150px;
  background: linear-gradient(to right, #ea4835, #ff7d69);
  position: relative;
  .cont {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    z-index: 2;
    right: 0;
    .btnRight {
      width: 70px;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 18px;
        height: 18px;
      }
      span {
        font-size: 14px;
        color: #fff;
      }
    }
  }
  .bannerImg {
    width: 100%;
    height: 150px;
    // position: absolute;
    // left: 50%;
    // bottom: -60px;
    // transform: translate(-50%, 0);
    .swiper {
      width: 100%;
      height: 150px;
      img {
        width: 100%;
        height: 100%;
        // border-radius: 6px;
      }
    }
    img {
      width: 100%;
      height: 100%;
      // border-radius: 6px;
    }
  }
}
.newContent {
  background: #f6f8f9;
  width: 100%;
  height: calc(100% - 100px);
  position: relative;
  .disBox {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -20px;
    z-index: 5;
  }
  .kong {
    height: 240px;
  }
  .disBox,
  .cargoBox {
    padding: 15px 10px;
    width: 340px;
    background: #fff;
    border-radius: 6px;
    margin: 0 auto 15px;
    .top {
      display: flex;
      align-items: center;
      img {
        width: 55px;
        height: 55px;
        border-radius: 50px;
        margin-right: 10px;
      }
      div {
        width: 180px;
        margin-right: 10px;
        span {
          font-size: 18px;
          color: #000;
        }
        p {
          font-size: 13px;
          color: #b4b4b4;
        }
      }
      button {
        background: #ef250b;
        color: #fff;
        font-size: 12px;
        line-height: 13px;
        padding: 5px 8px;
        margin: 0;
      }
    }
    .middle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0 15px;
      border-bottom: 1px solid #f1f1f1;
      padding-bottom: 10px;
      button {
        background: #fff;
        color: #ef250b;
        border: 1px solid #ef250b;
        border-radius: 6px;
        font-size: 13px;
        line-height: 13px;
        padding: 5px 3px;
        margin: 0;
      }
      div {
        display: flex;
        align-items: center;
        img {
          width: 58px;
          height: 18px;
        }
      }
    }
    .list {
      width: calc(100%);
      height: 70px;
      white-space: nowrap;
      background: #fff;
      div {
        width: 70px;
        height: 70px;
        display: inline-block;
        margin-right: 10px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
        p {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: calc(70px / 3);
          background-color: rgba(0, 0, 0, 0.5);
          font-size: 13px;
          line-height: calc(70px / 3);
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;
          color: #fff;
          text-align: center;
        }
      }
    }
  }
}

.hot {
  width: 90%;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  margin: 40px auto 0;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  .left {
    img {
      width: 19px;
      height: 25px;
      margin: 0 10px;
    }
    span {
      font-size: 14px;
      color: #000;
    }
  }
  .right {
    font-size: 14px;
    color: #ea412d;
    position: relative;
    // z-index: 99;
    margin-right: 10px;
  }
}
.list {
  height: calc(100% - 325px);
  background: #f6f6f6;
  .scroll-wrap {
    .box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      box-shadow: 0 0 8px lighten(#dfe1e6, 20%);
      .goods-block {
        width: 45%;
        margin: 10px 5px;
        background: #fff;
        border-radius: 6px;
        .preview {
          width: 100%;
          height: 45vw;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
        .previewKong {
          height: 155px;
        }
        .goodsContInfo {
          padding: 6px;
          .goodsName {
            font-size: 13px;
          }
          > .newShowMoney {
            font-size: 13px;
            display: flex;
            > .amount {
              color: $gray;
              text-decoration: line-through;
              margin-left: 10px;
            }
          }
          .btnBox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .discount {
              display: inline-block;
              color: $red;
              min-width: 50px;
            }
            .edit-btn {
              width: 40px;
              border-radius: 25px;
              display: block;
              // color: $white;
              color: #ef250b;
              font-size: 10px;
              // background-color: $blue;
              border: 1px solid #ef250b;
              padding: 0;
              height: 20px;
              line-height: 20px;
              margin: 0;
            }
          }
        }
      }
    }
  }
  .end-tip {
    margin: 0;
    padding: 15px;
    text-align: center;
    color: $gray;
    font-size: 15px;
  }
}
</style>
